body
{
			margin: 10px 0 ;
			padding: 0 ;
			text-align: center ;
			font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
			background: #cbe ;
}
			/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
			/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
			/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */

			div#conteneur
{
			width: 782px ;
			margin: 0 auto ;
			text-align: left ;
			border: 2px solid #639 ;
			background: #fff ;
}
			/* On définit la largeur de la division qui contient l'ensemble de la page à 780 pixels */
			/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
			/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */

			h1#header
{
			height: 172px ;
			background: url(ImageSommaire.jpeg) no-repeat left top;
}
			/* On définit la hauteur de la partie header, contenant le titre du site */
			
			ul#menu
{
			height: 40px ;
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
}
			
			ul#menu li
{
			
			float: left ;
			text-align: center ;
			text-indent: 30px ;
}
			
			ul#menu li a
{
			width: 130px ;
			line-height: 40px ;
			font-size: 1.2em ;
			font-weight: bold ;
			letter-spacing: 2px ;
			color: #639 ;
			display: block ;
			text-decoration: none ;
			background: url(menuDbl.jpg) repeat-x 0 0 ;
}
			
			ul#menu li a:hover
{
			background: url(menuDbl.jpg) repeat-x 0 -40px ;
}
			
	
			div#contenu
{
			padding: 0 30px 0 100px ;
			background: url(comptoir.jpg) no-repeat 15px 15px ;
}
		
			div#cd
{
			height: 400px ;
			
			background: url(PochetteIvan.jpg) no-repeat 0 0 ;
}
			
			div#cd img
{
			border: 2px solid #639 ;
}

			div#cd p
{
			margin-left: 410px ;
			margin-top: -400px ;
			text-align: justify ;
			line-height: 1.7em ;
			border: 2px solid #639 ;
}
			div#photo
{
			width: 500px ;	
			text-align: center ;
			display: block ;
			margin: 0 auto ;
}
			
			div#photo img
{			
			height: 60% ;
			width: 60% ;
			text-align: center ;
			border: 1px solid #639 ;
}

			div#photo img:hover
{
			text-align: center ;
			border: 1px solid #8a0 ;
}

			div#photo p
{
			margin: 30px ;
			text-align: center ;
			line-height: 1.7em ;
			border: 2px solid #639 ;
}

			div#contenu h2
{
			padding-left: 25px ;
			line-height: 25px ;
			font-size: 1.4em ;
			color: #639 ;
			background: url(beurk.jpg) no-repeat left bottom ;
			border-bottom: 1px solid #639 ;
}
			
			div#contenu h3
{
			margin-left: 15px ;
			padding-left: 5px ;
			border-bottom: 1px solid #639 ;
			border-left: 3px solid #639 ;
			color: #639 ;
}
			
			div#contenu p
{
			text-align: justify ;
			text-indent: 2em ;
			line-height: 1.7em ;
}

			div#contenu a
{
			color: #639 ;
}
			
			div#contenu a
{
			color: #639 ;
}

			div#contenu a:hover
{
			color: #8a0;
}
			/* On met en forme les liens contenu dans la page */
			
			p#footer
{
			margin: 0 ;
			padding-right: 10px ;
			line-height: 30px ;
			text-align: right ;
			color: #639 ;
}

			
			pre
{
			overflow: auto ;
			background: #dea ;
			border: 2px solid #9b2 ;
			padding: 5px 0 0 5px ;
			font-size: 1.2em ;
}

			/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
			* html pre
{
			width: 636px ;
}
			/* On doit donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
			
			pre span
{
			color: #560 ;
}

			pre span.comment
{
			color: #b30000 ;
}